<template>
  <div id="app">
    <!-- SuperMap3D 容器挂载 -->
    <div ref="viewerContainer" id="cesiumContainer"></div>
    <!-- 剖面分析的时候可能会用到 初始的时候没有宽高-->
    <canvas id="canvas-container" class="canvas-container"></canvas>
    <!-- 路由视图 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { initMap } from '@/utils/InitViewerContainer';

const viewerContainer = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (viewerContainer.value) {
    initMap(viewerContainer.value); // 使用 Vue 的 ref 引用 DOM 传给 initMap
  } else {
    console.error('viewerRef is null');
  }
});
</script>

<style lang="scss">
#app {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
// 让 SuperMap3D 容器全屏显示
#cesiumContainer {
  position: fixed; /* 固定定位，全屏 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

//元素脱离子组件布局限制，固定在整个窗口右下角
.canvas-container {
  position: fixed;
  right: 90px;
  bottom: 30px;
  width: 0px;
  height: 0px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
}
</style>
